<template>
  <view class="message-item">
    <view class="message-item-inner">
      <u-avatar class="message-item__avatar" :size="32" :src="item.avatar" />
      <u-image
        class="message-item__image"
        :showLoading="true"
        :width="120"
        height="auto"
        :src="imageUrl"
        mode="widthFix"
        :webp="true"
      />
    </view>
  </view>
</template>
<script>
import { getFilePath } from '../../utils/common'

export default {
  name: 'ImageMessage',
  props: {
    item: {
      type: Object,
      default: () => ({
        avatar: '',
        flow: 'out',
        m_data: {
          name: '',
          size: 0,
          url: '',
        }
      }),
      required: true
    }
  },
  computed: {
    imageUrl() {
      if (this.item.m_data.url) {
        return getFilePath(this.item.m_data.url)
      }
      return undefined
    }
  }
}
</script>
